<template>
<el-container style="padding: 1rem 1rem 2rem 1rem">
  <el-row style="width: 100%;" :gutter="10">
    <el-col :span="12">
      <el-card class="box-card" shadow="hover" body-style="{padding:1rem}" style="height: 400px">
        <template #header>
          <div class="card-header">
            <span>CPU</span>
          </div>
        </template>
        <div class="el-table el-table--enable-row-hover el-table--medium">
        <table style="width: 100%" >
          <thead>
           <tr>
             <td class="el-table__cell is-leaf">
               <div class="cell addBold">属性</div>
             </td>
             <td class="el-table__cell is-leaf">
               <div class="cell addBold">值</div>
             </td>
           </tr>
          </thead>
          <tbody>
          <tr class="banma">
            <td class="el-table__cell is-leaf">
              <div class="cell addBold">CPU核心数</div>
            </td>
            <td class="el-table__cell is-leaf">
              <div class="cell ">{{cpu.cpuNum}}</div>
            </td>
          </tr>
          <tr class="el-table--striped">
            <td class="el-table__cell is-leaf">
              <div class="cell addBold">CPU总的使用率</div>
            </td>
            <td class="el-table__cell is-leaf">
              <div class="cell">{{cpu.total}}</div>
            </td>
          </tr>
          <tr class="banma">
            <td class="el-table__cell is-leaf">
              <div class="cell addBold">CPU系统使用率</div>
            </td>
            <td class="el-table__cell is-leaf">
              <div class="cell">{{cpu.sys + '%'}}</div>
            </td>
          </tr>
          <tr>
            <td class="el-table__cell is-leaf">
              <div class="cell addBold">CPU用户使用率</div>
            </td>
            <td class="el-table__cell is-leaf">
              <div class="cell">{{cpu.used + '%'}}</div>
            </td>
          </tr>
          <tr class="banma">
            <td class="el-table__cell is-leaf">
              <div class="cell addBold">CPU当前等待率</div>
            </td>
            <td class="el-table__cell is-leaf">
              <div class="cell">{{cpu.wait + '%'}}</div>
            </td>
          </tr>
          <tr>
            <td class="el-table__cell is-leaf">
              <div class="cell addBold">CPU当前空闲率</div>
            </td>
            <td class="el-table__cell is-leaf">
              <div class="cell">{{cpu.free + '%'}}</div>
            </td>
          </tr>
          </tbody>
        </table>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="box-card" shadow="hover" body-style="{padding:1rem}" style="height: 400px">
        <template #header>
          <div class="card-header">
            <span>内存</span>
          </div>
        </template>
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <table style="width: 100%">
            <thead>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">属性</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">值</div>
              </td>
            </tr>
            </thead>
            <tbody>
            <tr class="banma">
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">内存总量</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{mem.total}}</div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">已用内存</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{mem.used}}</div>
              </td>
            </tr>
            <tr class="banma">
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">剩余内存</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{mem.free}}</div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">资源的使用率</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{mem.usage + '%'}}</div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card class="box-card" shadow="hover" body-style="{padding:1rem}">
        <template #header>
          <div class="card-header">
            <span>系统状态</span>
          </div>
        </template>
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <table style="width: 100%" >
            <tbody>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">服务器名称</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{sys.computerName}}</div>
              </td>
            </tr>
            <tr class="banma">
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">服务器Ip</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{sys.computerIp}}</div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">项目路径</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell ">{{sys.userDir}}</div>
              </td>
            </tr>
            <tr class="banma">
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">操作系统</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{sys.osName}}</div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card class="box-card" shadow="hover" body-style="{padding:1rem}">
        <template #header>
          <div class="card-header">
            <span>Java虚拟机信息</span>
          </div>
        </template>
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <table style="width: 100%">
            <tbody>
            <tr>
              <td class="el-table__cell is-leaf" style="width: 300px">
                <div class="cell addBold">当前JVM占用的内存总数(M)</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.total}}</div>
              </td>
            </tr>
            <tr class="banma">
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">JVM最大可用内存总数(M)</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.max}}</div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">JVM空闲内存(M)</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.free}}</div>
              </td>
            </tr>
            <tr class="banma">
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">JDK版本</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.version}}</div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">JDK路径</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.home}}</div>
              </td>
            </tr>
            <tr class="banma">
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">JDK名称</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.name}}</div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">使用量</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.used}}</div>
              </td>
            </tr>
            <tr class="banma">
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">JDK启动时间</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.startTime}}</div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">资源的使用率</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.usage + '%'}}</div>
              </td>
            </tr>
            <tr class="banma">
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">运行参数</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.inputArgs}}</div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf">
                <div class="cell addBold">JDK运行时间</div>
              </td>
              <td class="el-table__cell is-leaf">
                <div class="cell">{{jvm.runTime}}</div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card class="box-card" shadow="hover" body-style="{padding:1rem}">
        <template #header>
          <div class="card-header">
            <span>磁盘状态</span>
          </div>
        </template>
        <el-table :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" :data="sysFiles">
          <el-table-column label="盘符路径" prop="dirName"></el-table-column>
          <el-table-column label="盘符类型" prop="sysTypeName"></el-table-column>
          <el-table-column label="文件类型" prop="typeName"></el-table-column>
          <el-table-column label="总大小" prop="total"></el-table-column>
          <el-table-column label="剩余大小" prop="free"></el-table-column>
          <el-table-column label="已经使用量" prop="used"></el-table-column>
          <el-table-column label="资源的使用率" prop="usage"></el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</el-container>
</template>

<script>

export default {
  name: "服务监控",
  data(){
    return{
      cpu:{
        "cpuNum": 0,//核心数
        "total": 0,//CPU总的使用率
        "sys": 0,//CPU系统使用率
        "used": 0,//CPU用户使用率
        "wait": 0,//CPU当前等待率
        "free": 0//CPU当前空闲率
      },
      mem:{
        "total": 0,//内存总量
        "used": 0,//已用内存
        "free": 0,//剩余内存
        "usage": 0//资源的使用率
      },
      sys:{
        "computerName": "",//服务器名称
        "computerIp": "",//服务器Ip
        "userDir": "",//项目路径
        "osName": "",//操作系统
        "osArch": ""//系统架构
      },
      jvm:{
        "total": 0,//当前JVM占用的内存总数(M)
        "max": 0,//JVM最大可用内存总数(M)
        "free": 0,//JVM空闲内存(M)
        "version": "",//JDK版本
        "home": "",//JDK路径
        "name": "",//JDK名称
        "used": 0,//使用量
        "startTime": "",//JDK启动时间
        "usage": 0,//资源的使用率
        "inputArgs": "",//运行参数
        "runTime": ""//JDK运行时间
      },
      sysFiles:[]
    }
  },
  created() {
    this.getData()
  },
  methods:{
    async getData(){
      let res = await this.$API.monitor.monitor.getData.get()
      this.cpu = res.data.cpu;
      this.mem = res.data.mem;
      this.sys = res.data.sys;
      this.jvm = res.data.jvm;
      this.sysFiles =res.data.sysFiles
    }
  }
}
</script>

<style scoped lang="less">
.banma{
  background-color: #FAFAFA;
}
.addBold{
  font-weight: bold;
}


</style>
